<template>
  <el-popover placement="bottom" :width="310" trigger="click" @after-enter="popoverAfterEnter">
    <el-badge slot="reference" :value="5" :max="99">
      <div class="svg-box">
        <svg-icon class-name="size-icon" icon-class="notice" style="font-size: 24px" />
      </div>
    </el-badge>
    <el-tabs v-model="activeName" stretch>
      <el-tab-pane label="通知(5)" name="first">
        <div class="message-list" :style="{ '--theme': theme }">
          <div class="message-item">
            <img src="@/assets/images/msg01.png" alt="" class="message-icon" />
            <div class="message-content">
              <span class="message-title">一键三连 🧡</span>
              <span class="message-date">一分钟前</span>
            </div>
          </div>
          <div class="message-item">
            <img src="@/assets/images/msg02.png" alt="" class="message-icon" />
            <div class="message-content">
              <span class="message-title">一键三连 💙</span>
              <span class="message-date">一小时前</span>
            </div>
          </div>
          <div class="message-item">
            <img src="@/assets/images/msg03.png" alt="" class="message-icon" />
            <div class="message-content">
              <span class="message-title">一键三连 💚</span>
              <span class="message-date">半天前</span>
            </div>
          </div>
          <div class="message-item">
            <img src="@/assets/images/msg04.png" alt="" class="message-icon" />
            <div class="message-content">
              <span class="message-title">一键三连 💜</span>
              <span class="message-date">一星期前</span>
            </div>
          </div>
          <div class="message-item">
            <img src="@/assets/images/msg05.png" alt="" class="message-icon" />
            <div class="message-content">
              <span class="message-title">一键三连 💛</span>
              <span class="message-date">一个月前</span>
            </div>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="消息(0)" name="second">
        <div class="message-empty">
          <img src="@/assets/images/notData.png" alt="notData" />
          <div>暂无消息</div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="待办(0)" name="third">
        <div class="message-empty">
          <img src="@/assets/images/notData.png" alt="notData" />
          <div>暂无待办</div>
        </div>
      </el-tab-pane>
    </el-tabs>
  </el-popover>
</template>

<script>
export default {
  data() {
    return {
      activeName: ''
    }
  },

  computed: {
    theme() {
      return this.$store.state.settings.theme
    }
  },

  methods: {
    // 解决el-popover和el-tabs的样式冲突问题
    popoverAfterEnter() {
      // this.activeName = this.activeName !== '0' ? this.activeName : 'first' // 需要显示上一个选择的tab时使用
      this.activeName = 'first'
    }
  }
}
</script>

<style scoped lang="scss">
.svg-box {
  line-height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.message-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 260px;
  line-height: 45px;
}
.message-list {
  display: flex;
  flex-direction: column;
  .message-item {
    display: flex;
    align-items: center;
    padding: 20px 0;
    border-bottom: 1px solid #e4e7ed;
    cursor: pointer;
    &:last-child {
      border-color: transparent;
    }
    &:hover {
      background-color: color-mix(in srgb, var(--theme) 10%, transparent);
      color: #{'var(--theme)'} !important;
      border-bottom: 1px solid #{'var(--theme)'} !important;
      // border-color: #{'var(--theme)'} !important;
      .message-date {
        color: #{'var(--theme)'} !important;
      }
    }
    .message-icon {
      width: 40px;
      height: 40px;
      margin: 0 20px 0 5px;
    }
    .message-content {
      display: flex;
      flex-direction: column;
      .message-title {
        margin-bottom: 5px;
      }
      .message-date {
        font-size: 12px;
        color: #909399;
      }
    }
  }
}
</style>
